/*
 * @Descripttion:
 * @version:
 * @Author: cain
 * @Date: 2023-01-11 08:50:54
 * @LastEditors: Andy
 * @LastEditTime: 2023-01-13 08:49:34
 * @FilePath: \cain-ui\package\theme\theme.ts
 */
import { CainUiThemes } from "../../utils/Dto/CainUiTheme.Dto";
import { createCainUiOption } from "./../../utils/Dto/createCainUiOption.Dto";

// 深色样式
let dark = {};

// 浅色样式
let light = {};

/**
 * @name: 初始化主题
 * @msg: 初始化主题样式，用户可自定义主题样式。
 * @param {createCainUiOption} option
 * @return {*}
 */
export const useCainUiTheme = (option: CainUiThemes) => {
  const app: HTMLElement = document.getElementsByTagName("div")[0];
  app?.classList.add("theme--light");
  ColorThemeReplace(option.themes?.light);
  if (
    option.themes?.dark == true ||
    (option.themes?.dark as any).dark == true
  ) {
    app.classList.remove("theme--light");
    app?.classList.add("theme--dark");
    ColorThemeReplace(option.themes?.dark);
  }
};

/**
 * @name: 主题颜色替换
 * @msg: 传入一个主题对象然后根据keys替换对象
 * @return {*}
 */
export const ColorThemeReplace = (objTheme: object | any) => {
  Object.keys(objTheme).forEach((v) => {
    document
      .getElementsByTagName("body")[0]
      .style.setProperty(`--${v}`, objTheme[v]);
  });
};
